<div class="col-md-4 col-sm-6 col-xs-12 ms-item">
    <div class="card panel panel-default">
        <div class="card-heading image">
            <img alt="46x46"
                 src=""
                 data-src="holder.js/46x46" style="width: 46px; height: 46px;">

            <div class="card-heading-header">
                <h3>Simple News Card</h3>
                <span>Published today - 08.34 AM</span>
            </div>
        </div>
        <div class="card-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
        <div class="card-media">
            <a href="#" class="card-media-container">
                <img alt="500x300"
                     src=""
                     data-src="holder.js/500x300/social" style="width: 500px; height: 300px;">
            </a>
        </div>
        <div class="card-actions">
            <form>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button class="btn btn-default">+1</button>
                        <button class="btn btn-default"><i class="glyphicon glyphicon-share"></i></button>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-comments">
            <div class="comments-collapse-toggle">
                <a data-toggle="collapse">34条评论<i class="glyphicon glyphicon-chevron-down"></i></a>
            </div>
            <div class="comments collapse">
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" data-src="http://holder.js/28x28" alt="avatar"/>
                    </a>

                    <div class="media-body">
                        <h4 class="media-heading">Comment title</h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam...</p>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="评一个...">
            </div>
            <form class="form-horizontal comment-form" role="form">
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" data-src="http://holder.js/28x28" alt="avatar"/>
                    </a>

                    <div class="media-body">
                        <textarea class="form-control" placeholder="请使用正能量的文字哟"></textarea>

                        <div class="comment-form-btns">
                            <button class="btn btn-success btn-small" type="button">评一个</button>
                            <button class="btn btn-default btn-small" type="button">取消</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ms-item">
    <div class="card panel panel-default">
        <div class="card-heading image">
            <img alt="46x46"
                 src=""
                 data-src="holder.js/46x46" style="width: 46px; height: 46px;">

            <div class="card-heading-header">
                <h3>Simple News Card</h3>
                <span>Published today - 08.34 AM</span>
            </div>
        </div>
        <div class="card-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
        <div class="card-media">
            <a href="#" class="card-media-container">
                <img alt="500x300"
                     src=""
                     data-src="holder.js/500x300/social" style="width: 500px; height: 300px;">
            </a>
        </div>
        <div class="card-actions">
            <form>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button class="btn btn-default">+1</button>
                        <button class="btn btn-default"><i class="glyphicon glyphicon-share"></i></button>
                    </div>
                    <input type="text" class="form-control" placeholder="评一个...">
                </div>
            </form>
            <form class="form-horizontal comment-form" role="form">
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" data-src="http://holder.js/28x28" alt="avatar"/>
                    </a>

                    <div class="media-body">
                        <textarea class="form-control" placeholder="请使用正能量的文字哟"></textarea>

                        <div class="comment-form-btns">
                            <button class="btn btn-success btn-small" type="button">评一个</button>
                            <button class="btn btn-default btn-small" type="button">取消</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ms-item">
    <div class="panel panel-default">
        <div class="panel-heading"><a class="pull-right" href="#">更多</a> <h4>和大家一起跑</h4></div>
        <div class="panel-body">
            <div class="media">
                <a href="#" class="pull-left">
                    <img alt="48x48" data-src="http://holder.js/48x48" class="media-object"
                         style="width: 48px; height:48px;"/>
                </a>

                <div class="media-body">
                    <p class="media-heading">上海浦东世纪公园<a href="#" class="btn btn-default btn-sm pull-right">参加</a></p>
                    <small class="text-info">12人</small>
                </div>
            </div>
        </div>
    </div>
</div>
